<template>
	<view>
		<div class="herder ">
			<div class="herder_left"></div>
			<div class="herder_right">应急预案详情</div>
		</div>
		<div class="box">
			<div class="box_item">
				<div class="box_lable">
					预案编号
				</div>
				<div class="box_value">
					<div>{{info.planNo}}</div>
				</div>
			</div>
			<div class="box_item">
				<div class="box_lable">
					预案类别
				</div>
				<div class="box_value">
					<div>{{info.planTypeStr}}</div>
				</div>
			</div>
			<div class="box_item">
				<div class="box_lable">
					预案部门
				</div>
				<div class="box_value">
					<div>{{info.deptName}}</div>
				</div>
			</div>
			<div class="box_item">
				<div class="box_lable">
					预案名称
				</div>
				<div class="box_value">
					<div>{{info.planName}}</div>
				</div>
			</div>
			<div class="box_item">
				<div class="box_lable">
					适用范围
				</div>
				<div class="box_value">
					<div>{{info.usedScope}}</div>
				</div>
			</div>
			<div class="box_item">
				<div class="box_lable">
					预案日期
				</div>
				<div class="box_value">
					<div>{{info.planDate}}</div>
				</div>
			</div>
			<div class="box_item align-items" v-if="flowList.length>0">
				<div class="box_lable">
					预案流程
				</div>
				<div class="box_value">
					<block v-for="(vi,idx) in flowList" :key="idx">
						<div class="filer  align-items" @click="nearby(vi.fileUrlShow)">
							<span>查看预案流程{{idx+1}}</span>
							<u-icon name="arrow-right"  color="#2979ff"></u-icon>
						</div>
					</block>
				</div>
			</div>
			<div class="box_item align-items" v-if="annexList.length>0">
				<div class="box_lable">
					应急预案
				</div>
				<div class="box_value">
					<block v-for="(vi,idx) in annexList" :key="idx">
						<div class="filer align-items" @click="nearby(vi.fileUrlShow)">
							<span>查看附件{{idx+1}}</span>
							<u-icon name="arrow-right"  color="#2979ff"></u-icon>
						</div>
					</block>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		securityEmergencePlanDetails
	} from '@/api/emergencyPlan.js'
	import urlConfig from "@/request/urlConfig.js";
	export default {
		data() {
			return {
				info: {},
				annexList: [], //应急演练附件内容
				flowList: [], //预案流程内容	
			}
		},
		onLoad(option) {
			this.getSecurityEmergencePlanDetails(option.id)

		},
		methods: {
			nearby(url) {
				const extensionUrl = urlConfig.nearbyUrl + url
				const extension = extensionUrl.split('.').pop().toLowerCase();
				console.log(extensionUrl, "extensionUrl");
				if (extension == 'pdf') {
					window.android.startDoc(extensionUrl);
				} else {
					window.open(extensionUrl)
				}
			},
			async getSecurityEmergencePlanDetails(id) {
				const res = await securityEmergencePlanDetails({
					id: id
				})
				console.log(res);
				this.info = res.datas.details
				this.annexList = res.datas.annexList
				this.flowList = res.datas.flowList
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	.herder {
		width: 710rpx;
		margin: 30rpx auto;
		display: flex;
		align-items: center;

		&_left {
			width: 4rpx;
			background-color: #257eff;
			height: 50rpx;
		}

		&_right {
			font-size: 34rpx;
			font-weight: 600;
			margin-left: 30rpx;
		}
	}

	.box {
		margin-top: 50rpx;
		padding: 20rpx;
		background-color: #FFF;

		&_item {
			margin-top: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #e0e0e0;
			display: flex;
			justify-content: space-between;
		}

		&_lable {
			flex: 0 0 auto;
			color: #999999;
		}

		&_item:last-child {
			border-bottom: none;
		}

		&_item:first-child {
			margin-top: 0;
		}
	}
	.filer{
		display: flex;
		margin-top: 30rpx;
		color: #2979ff;
	}
	.filer:first-child {
			margin-top: 0;
	}
</style>